<template>
  <div>
    <h2>管理员主页</h2>
    <p class="breadcrumb">首页</p>

    <el-row :gutter="10" class="stats-row">
      <el-col :span="6">
        <el-card class="card card-blue clickable" @click="goTo('/AdminMain/ClassManager')">
          今日开课总数
          <div class="card-number">{{ humanTotal }}节</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card card-yellow clickable" @click="goTo('/AdminMain/EmployeeManager')">
          员工人数
          <div class="card-number">{{ employeeTotal }}人</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card card-green clickable" @click="goTo('/AdminMain/MemberManager')">
          会员人数
          <div class="card-number">{{ memberTotal }}人</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card card-red clickable" @click="goTo('/AdminMain/EquipmentManager')">
          器材数
          <div class="card-number">{{ equipmentTotal }}件</div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="chart-row">
      <el-col :span="12">
        <el-card>
          <div class="card-title">
            <i class="el-icon-data-line"></i> 会员打卡人数
          </div>
          <v-chart :option="areaChartOption" style="height: 250px" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="card-title">
            <i class="el-icon-s-data"></i> 每月营销总额
          </div>
          <v-chart :option="barChartOption" style="height: 250px" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import axios from "axios";

use([CanvasRenderer, LineChart, BarChart, GridComponent, TooltipComponent, LegendComponent])

const router = useRouter()
const goTo = (path) => {
  router.push(path)
}

const humanTotal = ref(18)
const employeeTotal = ref(0)
const memberTotal = ref(0)
const equipmentTotal = ref(0)


// 拉取各模块分页 total 的函数
const fetchStatistics = async () => {
  try {
    const [empRes, memRes, eqpRes] = await Promise.all([
      axios.get('/server/employee/search', { params: { page: 1, size: 1 } }),
      axios.get('/server/member/search', { params: { page: 1, size: 1 } }),
      axios.get('/server/equipment/search', { params: { page: 1, size: 1 } })
    ])

    if (empRes.data.code === 200) employeeTotal.value = empRes.data.data.total
    if (memRes.data.code === 200) memberTotal.value = memRes.data.data.total
    if (eqpRes.data.code === 200) equipmentTotal.value = eqpRes.data.data.total
  } catch (err) {
    console.error('统计数据拉取失败:', err)
  }
}

// 页面加载时自动执行
onMounted(() => {
  fetchStatistics()
})


const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

const attendanceData = Array.from({ length: 12 }, () => Math.floor(150 + Math.random() * 150))
const marketingData = Array.from({ length: 12 }, () => Math.floor(Math.random() * 60000))

const areaChartOption = {
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: months, boundaryGap: false },
  yAxis: { type: 'value' },
  series: [{
    name: '打卡人数',
    data: attendanceData,
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 8,
    lineStyle: { color: '#409EFF' },
    itemStyle: { color: '#409EFF' },
    areaStyle: {
      color: {
        type: 'linear',
        x: 0, y: 0, x2: 0, y2: 1,
        colorStops: [
          { offset: 0, color: '#409EFF88' },
          { offset: 1, color: '#ffffff' }
        ]
      }
    }
  }]
}

const barChartOption = {
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: months },
  yAxis: { type: 'value' },
  series: [{
    name: '营销总额',
    data: marketingData,
    type: 'bar',
    barWidth: '50%',
    itemStyle: {
      borderRadius: [4, 4, 0, 0],
      color: {
        type: 'linear',
        x: 0, y: 0, x2: 0, y2: 1,
        colorStops: [
          { offset: 0, color: '#409EFF' },
          { offset: 1, color: '#6ec6ff' }
        ]
      }
    }
  }]
}
</script>

<style scoped>
.breadcrumb {
  color: #6c757d;
  font-size: 13px;
  margin-bottom: 10px;
}

.stats-row .el-card {
  text-align: center;
  padding: 10px;
  border-radius: 6px;
}

.card-number {
  font-size: 18px;
  font-weight: bold;
  margin-top: 5px;
}

.card-title {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 8px;
}

.card-blue {
  background-color: #007bff;
  color: white;
}

.card-yellow {
  background-color: #ffc107;
  color: white;
}

.card-green {
  background-color: #28a745;
  color: white;
}

.card-red {
  background-color: #dc3545;
  color: white;
}

.chart-row {
  margin-top: 20px;
  margin-bottom: 10px;
}

/* 新增点击卡片样式 */
.clickable {
  cursor: pointer;
  transition: transform 0.2s ease;
}
.clickable:hover {
  transform: scale(1.03);
}
</style>
